<template>
	<view class="budgetLayout">
		<view class="nav" :style="'padding-top:'+getStatusBarHeight()+'px'">
			<view class="backBar">
				<uni-icons class="icon" type="closeempty" size="24" color="white"></uni-icons>
				<view class="text">本月预算</view>
			</view>
			<view class="title">
				<view class="text">预算总额</view>
				<view class="amount">¥00.00</view>
			</view>
		</view>
		<view class="detail">
			<view class="title">预算详情</view>
			<view class="row">
				<view class="icon pay"></view>
				<view class="text">金额</view>
				<input type="digit" placeholder="输入预算总额">
			</view>
			<view class="row">
				<view class="icon pen"></view>
				<view class="text">备注</view>
				<input type="text" maxlength="30" placeholder="输入备注">
			</view>
			<view class="submit">
				<view class="icon">
					<uni-icons type="checkmarkempty" size="20" color="white"></uni-icons>
				</view>
				<view>预算确认</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getStatusBarHeight
	} from '@/utils/system.js'
	
	
</script>

<style lang="scss" scoped>
	.budgetLayout {
		background: #f9f9ff;
		min-height: 100vh;
		
		.nav {
			background-color: white;
			height: 240rpx;
			background: linear-gradient(224.2deg, rgba(126, 241, 146, 1) 0%, rgba(45, 200, 151, 1) 100%);
			box-shadow: 0px 4px 16px -4px rgba(118, 237, 146, 1);
			display: flex;
			flex-direction: column;
			
			.backBar {
				padding: 0rpx 40rpx 0rpx 40rpx;
				position: relative;
				height: 36rpx;
				text-align: center;
				color: white;
				font-size: 32rpx;
				letter-spacing: 2rpx;
				
				.icon {
					position: absolute;
					height: 32rpx;
					width: 32rpx;
					top: 0rpx;
					left: 0rpx;
				}
			}
			
			.title {
				margin-top: 24rpx;
				background-color: rgba(37, 163, 123, 1);
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: white;
				
				.text {
					font-size: 22rpx;
					letter-spacing: 3rpx;
				}
				
				.amount {
					margin-top: 5rpx;
					font-size: 50rpx;
				}
			}
			
		}
		
		.detail {
			margin: 32rpx;
			background-color: white;
			border-radius: 5px;
			box-shadow: 0px 4px 16px  rgba(239, 245, 255, 1);
			padding: 32rpx;
			
			.title {
				font-size: 28rpx;
				line-height: 36rpx;
				color: rgba(138, 138, 138, 1);
				margin-bottom: 48rpx;
			}
			
			.row:nth-child(n+2) {
				padding-left: 80rpx;
			}
			
			.row {
				height: 92rpx;
				margin-bottom: 28rpx;
				border: 1px solid rgba(216, 216, 216, 1);
				border-radius: 3px;
				position: relative;
				
				
				.icon {
					position: absolute;
					left: 10rpx;
					top: 13rpx;
					width: 60rpx;
					height: 60rpx;
				}
				
				.pay {
					background: url('@/static/images/add/pay.png') no-repeat;
					background-size: 100%;
				}
				
				.pen {
					left: 12rpx;
					top: 20rpx;
					background: url('@/static/images/add/pen.png') no-repeat;
					background-size: 80%;
				}
				
				.text {
					color: #1C1C1C;
					font-size: 22rpx;
				}
				
				input {
					height: 60rpx;
				}
			}
			
			.submit {
				margin-top: 40rpx;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				border-radius: 50rpx;
				background: linear-gradient(138.46deg, #7EF192 0%, #2DC897 100%);
				box-shadow: 0px 4px 16px -4px #76ED92;
				color: white;
				letter-spacing: 2rpx;
				font-size: 34rpx;
				position: relative;
				
				.icon {
					padding-top: 2rpx;
					position: absolute;
					left: 18rpx;
					top: 18rpx;
					width: 64rpx;
					height: 64rpx;
					border-radius: 32rpx;
					background: rgba(124, 140, 186, 0.4);
					display: flex;
					justify-content: center;
					align-items: center;
					box-shadow: 0px 0px 24px -4px rgba(124, 140, 186, 0.2);
				}
			}
		}
		
		
	}
</style>
